<template>
    <div class="login">
        <div class="login-win">
            <div class="ms-title">后台管理系统</div>
            <div class="ms-content">
                <a-form
                    id="components-form-demo-normal-login"
                    :form="form"
                    class="login-form"
                    @submit="handleSubmit"
                >
                    <a-form-item>
                    <a-input
                        v-decorator="[
                        'username',
                        { rules: [{ required: true, message: '请输入用户名！' }] },
                        ]"
                        placeholder="用户名"
                    >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                    </a-form-item>
                    <a-form-item>
                    <a-input
                        v-decorator="[
                        'password',
                        { rules: [{ required: true, message: '请输入密码！' }] },
                        ]"
                        type="password"
                        placeholder="密码"
                    >
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                    </a-form-item>
                    <a-form-item>
                    <a-button type="primary" html-type="submit" class="login-form-button">
                        登录
                    </a-button>
                    </a-form-item>
                </a-form>
            </div>            
        </div>
    </div>
</template>

<script>
import { setCookie } from '../../until/tools';
export default {
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'normal_login' });
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.$http.userLogin(values).then(res=>{
                        if(res.success) {
                            setCookie('user',res.username+'-'+res.uid,{time:1});
                            this.$router.push('/index/goods')
                        }
                    })
                }
            });
        }
    },
}
</script>

<style lang="scss">
    @import '../../scss/_variables.scss';
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
        padding:30px;
    }
    #components-form-demo-normal-login .login-form-forgot {
    float: right;
    }
    #components-form-demo-normal-login .login-form-button {
    width: 100%;
    }
    .login {
        height:100%;
        background:url(~@/assets/login-bg.png);
    }
    .login-win {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(0,0,0,.2);
        overflow: hidden;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-content {
        padding:30px;
    }
</style>